<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot="top">
				<u-navbar :title="$t('particulars.navText')" placeholder :autoBack="true" />
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="goDetail(item)">
					<view class="item_left">
						<u--text :text="item.price+$t('particulars.unit')" size="45rpx" lines="1" bold margin="0px 0px 15px 0px" align="center" color="#fff" />
						<u--text :text="'满'+item.limit+'元可用'" size="25rpx" lines="1" align="center" color="#fff" />
					</view>
					<view class="item_right">
						<view class="status">
							<view class="status_text">{{getStatus(item.state)}}</view>
						</view>
						<u--text :text="item.startdate+$t('particulars.to')+item.enddate" size="16px" margin="12px 0px" lines="1" color="rgba(41, 41, 41, 1)" />
						<u--text :text="$t('particulars.issue')+item.grant+$t('particulars.open')+','+$t('particulars.get')+item.alreadygrant+$t('particulars.open')+$t('particulars.use')+item.usenum+$t('particulars.open')"
							size="13" lines="1" color="rgba(189, 189, 189, 1)" />
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: []
			};
		},
		onLoad() {
			uni.$on("updatePopup",()=>{
				this.$refs.paging.reload()
			})
		},
		methods: {
			getStatus(state){
				switch(parseInt(state)){
					case 1 :
					  return '发行中'
					break;
					case 2 :
					  return '已停用'
					break;
					case 3 :
					  return '已失效'
					break;
				}
			},
			queryList(pageNo, pageSize) {
				this.$http.post('wanlshop/coupon/couponList', {
					page: pageNo,
					limit: pageSize
				}).then(res => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.coupon.data)
					} else {
						this.$refs.paging.complete(false)
					}
				})
			},
			goDetail(item) {
				uni.$u.route({
					url: 'pagesA/my/launchDetail',
					params:{
						id:item.id
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f8f9fd;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 24rpx 20rpx;

		.item {
			display: grid;
			grid-template-columns: 0.6fr 1fr;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;

			.item_left {
				background: linear-gradient(93.44deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
				padding: 40rpx 50rpx;
			}

			.item_right {
				padding: 20rpx;

				.status {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.status_text {
					border-radius: 5rpx;
					padding: 5rpx 15rpx;
					color: #fff;
					font-size: 24rpx;
					background: linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
				}
			}
		}

		.item::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			top: 50%;
			transform: translateY(-50%);
			left: -19rpx;
			background: #f8f9fd;
		}

		.item::before {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			top: 50%;
			transform: translateY(-50%);
			right: -19rpx;
			background: #f8f9fd;
		}
	}
</style>
